import type { VNode, SetupContext } from 'vue'
import type { FacilityLoopsInfoPopoverPropsType } from './typings'
// import { ref } from 'vue'
import {
  ElPopover,
  ElCard,
  ElRow,
  ElCol,
  ElLink,
  ElTooltip,
  ElCheckbox,
  ElCheckboxGroup
} from 'element-plus'
import AliIcon from '~/components/AliIocn'
import styles from '../../index.module.scss'

export default function FacilityLoopsInfoPopover(
  props: FacilityLoopsInfoPopoverPropsType,
  { emit }: SetupContext
): VNode {
  // 切换全选全不选状态
  const handleChangeAllActiveLoopIds = (val: boolean) => {
    emit('changeActiveLoopIds', val ? props?.loopList?.map((item) => item?.distributionLoopId) : [])
  }

  // 切换单项的选中状态
  const handleChangeActiveLoopIds = (value: string[]) => {
    emit('changeActiveLoopIds', value)
  }

  return (
    <ElPopover
      visible
      placement="bottom"
      teleported={false}
      popperClass={styles['asset-home-info-popover']}
      {...{
        // virtualRef: props.dom,
        virtualRef: {
          getBoundingClientRect() {
            return DOMRect.fromRect({
              width: 0,
              height: 0,
              x: props.left,
              y: props.top
            })
          }
        },
        virtualTriggering: true
      }}
    >
      <ElCard
        class={{
          [styles['asset-home-area-info-card']]: true,
          [styles['asset-home-loop-info-card']]: true
        }}
        shadow="never"
        v-slots={{
          header: () => (
            <ElRow>
              <ElCol span={18}>
                <ElCheckbox
                  modelValue={
                    props.activeLoopIds?.length &&
                    props.activeLoopIds?.length === props?.loopList?.length
                  }
                  indeterminate={
                    props.activeLoopIds!?.length > 0 &&
                    props.activeLoopIds!?.length < props?.loopList!?.length
                  }
                  onChange={(val) => handleChangeAllActiveLoopIds(val as boolean)}
                >
                  <ElTooltip content={props?.name}>
                    <section class="text-one-line-overflow">{props?.name}</section>
                  </ElTooltip>
                </ElCheckbox>
              </ElCol>
              <ElCol span={6} {...{ align: 'right' }}>
                <ElLink
                  class={styles['asset-home-info-popover-close']}
                  underline={false}
                  onClick={props.onCancel}
                >
                  <AliIcon type="icon-danchuang-guanbi" />
                </ElLink>
              </ElCol>
            </ElRow>
          )
        }}
      >
        <ElCheckboxGroup
          modelValue={props.activeLoopIds}
          onChange={(value) => handleChangeActiveLoopIds(value as unknown as string[])}
        >
          {props?.loopList?.map((item) => (
            <ElCheckbox
              class={styles['facility-loop-checkbox']}
              key={item?.distributionLoopId}
              label={item?.distributionLoopId}
            >
              回路{item?.distributionLoopName}
              <section class="facility-loop-checkbox-info">
                <p>灯数量：{item?.lampBaseNum}</p>
                <p>灯杆数量：{item?.lampPostNum}</p>
              </section>
            </ElCheckbox>
          ))}
        </ElCheckboxGroup>
      </ElCard>
    </ElPopover>
  )
}
